import React, { Component } from 'react'
import _ from "lodash";

export class Header extends Component {
    constructor(props) {
        super(props)

        this.state = {
            value1: "",
            value2: "",

        }
    }

    changeR = (e) => {
        this.setState({
            value1: e.target.value,
        })
    }
    changeS = (e) => {
        this.setState({
            value2: e.target.value,
        })
    }

    render() {
        const { value1, value2 } = this.state;
        const { searchFn } = this.props;
        return (
            <div className='header'>
                {/* <h3>{value1}</h3><h3>{value2}</h3> */}
                <p>规则名称：<input type="text" value={value1} onChange={this.changeR} /></p>
                <button onClick={_.debounce((e) => {
                    searchFn(e.target.value)
                }, 1000)}>搜索</button>
                <p>使用状态：<input type="text" value={value2} onChange={this.changeS} /></p>
            </div>
        )
    }
}



export default Header